<template>
  <div id="colorIndex"
       :class="className"
       style="width: 100%; height: 400px" />
</template>

<script>
import * as echarts from "echarts"

export default {
  props: {
    className: {
      type: String,
      default: "chart"
    },
    chartData: {
      type: Array,
      required: true
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "350px"
    },
    // autoResize: {
    //   type: Boolean,
    //   default: true
    // },
    // chartData: {
    //   type: Array,
    //   required: true
    // },
    // chartTime: {
    //   type: Array,
    //   required: true
    // },
    // min: {
    //   type: String,
    //   required: true
    // },
    // max: {
    //   type: String,
    //   required: true
    // },
    // interval: {
    //   type: Number,
    //   required: false
    // },
    // unit: {
    //   type: String,
    //   default: ""
    // },
    // color: {
    //   type: String,
    //   default: "#239DD2"
    // }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions();
      }
    },
  },
  mounted() {
    window.addEventListener("resize", this.resizeHandler);
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeHandler);
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    resizeHandler() {
      this.chart.resize();
    },
    initChart() {
      this.$nextTick(() => {
        this.chart = echarts.init(this.$el);
        this.setOptions();
      },
      )
    },
    setOptions() {
      var option;
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          top: 40,
          bottom: 40
        },
        xAxis: {
          type: 'value',
          position: 'bottom',
          splitLine: {
            lineStyle: {
              type: 'solid'
            }
          },
          axisLine: { show: true },
          axisLabel: { show: true },
          axisTick: { show: false }
        },
        /*itemStyle: {
          color: function (params) {
            var colorList = ['#FAFAFA', '#EF97A5', '#C7A374', "#ABBF57", "#69C4A0", "#77C1E1", "#76A1F3",
              "#BA93F3", "#EF8CEA", "#FC421B", "#EFE943", "#08A482", "#0258C5", "#FFE8DB", "#6B7E48", "#FFCC99"].reverse();
            return colorList[params.dataIndex]
          }
        },*/
        yAxis: {
          type: 'category',
          // name: 'Ra',
          // nameLocation: "start",
          // nameTextStyle: {
          //   padding: [0, 0, 0, 10]
          // },
          axisLine: { show: true },
          axisLabel: { show: true },
          axisTick: { show: false },
          splitLine: { show: true },
          data: ['R15','R14','R13','R12','R11','R10','R9','R8','R7','R6','R5','R4','R3','R2','R1']
        },
        series: [
          {
            name: '显色指数',
            type: 'bar',
            // label: {
            //   show: true,
            //   formatter: '{b}'
            // },
            data: [...this.chartData].reverse(),
            //从调色盘 option.color 中取色的策略，可取值为：
            //'series'：按照系列分配调色盘中的颜色，同一系列中的所有数据都是用相同的颜色；
            //'data'：按照数据项分配调色盘中的颜色，每个数据项都使用不同的颜色。
            colorBy: "data"
          }
        ]
      };
      option && this.chart.setOption(option);
    }
  }
};
</script>
